<!-- The exported code uses Tailwind CSS. Install Tailwind CSS in your dev environment to ensure all styles work. -->
<template>
    <div class="min-h-screen bg-gray-50">
        <!-- 顶部导航栏 -->
        <Header />
        <!-- 左侧导航栏 -->
        <aside class="fixed left-0 top-16 bottom-0 w-64 bg-gray-800 text-white z-10 overflow-y-auto">
            <nav class="py-4">
                <div v-for="(menu, index) in mainMenus" :key="index" class="mb-1">
                    <div class="flex items-center px-6 py-3 cursor-pointer hover:bg-gray-700"
                        :class="{ 'bg-blue-700': menu.active }" @click="toggleMenu(index)">
                        <i :class="menu.icon + ' mr-3 w-5 text-center'"></i>
                        <span>{{ menu.name }}</span>
                        <i class="fas fa-chevron-down ml-auto text-xs transition-transform duration-200"
                            :class="{ 'transform rotate-180': menu.expanded }"></i>
                    </div>
                    <div v-if="menu.expanded" class="bg-gray-900">
                        <div v-for="(submenu, subIndex) in menu.subMenus" :key="subIndex"
                            class="flex items-center px-10 py-2 cursor-pointer hover:bg-gray-700"
                            :class="{ 'text-blue-400': submenu.active }" @click="selectSubmenu(index, subIndex)">
                            <a v-if="menu.name === '监测报警' && submenu.name === '区域化展示'" href="/regional-display"
                                data-readdy="true" class="text-sm">{{ submenu.name }}</a>
                            <a v-else-if="submenu.link" :href="submenu.link" data-readdy="true" class="text-sm">{{
                                submenu.name }}</a>
                            <span v-else class="text-sm">{{ submenu.name }}</span>
                        </div>
                    </div>
                </div>
            </nav>
        </aside>
        <!-- 主内容区域 -->
        <main class="pt-16 pl-64">
            <div class="container mx-auto p-6">
                <!-- 面包屑导航 -->
                <div class="flex items-center text-sm mb-4 text-gray-500">
                    <span>首页</span>
                    <i class="fas fa-chevron-right mx-2 text-xs"></i>
                    <span>风险研判</span>
                    <i class="fas fa-chevron-right mx-2 text-xs"></i>
                    <span class="text-blue-600">智能风险评估</span>
                </div>
                <!-- 风险评分看板 -->
                <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
                    <div class="flex justify-between items-center mb-6">
                        <h2 class="font-bold text-lg text-gray-800">风险评分看板</h2>
                        <div class="flex space-x-3">
                            <div class="relative">
                                <button @click="toggleDateDropdown"
                                    class="flex items-center space-x-2 bg-gray-100 text-gray-700 px-4 py-2 rounded !rounded-button whitespace-nowrap cursor-pointer">
                                    <span>{{ selectedDateRange }}</span>
                                    <i class="fas fa-chevron-down text-xs"></i>
                                </button>
                                <!-- 日期范围下拉菜单 -->
                                <div v-if="showDateDropdown"
                                    class="absolute right-0 mt-2 w-40 bg-white rounded-lg shadow-xl z-20">
                                    <div class="py-1">
                                        <a v-for="(range, index) in dateRanges" :key="index"
                                            @click="selectDateRange(range)"
                                            class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer">
                                            {{ range }}
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <button @click="exportReport"
                                class="px-4 py-2 bg-blue-600 text-white rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer">
                                <i class="fas fa-download mr-2"></i> 导出报告
                            </button>
                        </div>
                    </div>
                    <div class="grid grid-cols-4 gap-6 mb-6">
                        <!-- 总体风险评分 -->
                        <div
                            class="bg-gradient-to-r from-blue-500 to-blue-700 rounded-lg p-5 text-white relative overflow-hidden">
                            <div class="absolute top-0 right-0 w-32 h-32 -mt-10 -mr-10 opacity-20">
                                <i class="fas fa-shield-alt text-9xl"></i>
                            </div>
                            <h3 class="text-sm font-medium mb-1 opacity-90">总体风险评分</h3>
                            <div class="flex items-end space-x-2">
                                <span class="text-4xl font-bold">78.5</span>
                                <span class="text-sm opacity-90">/ 100</span>
                            </div>
                            <div class="mt-3 flex items-center text-sm">
                                <span class="bg-blue-800 bg-opacity-30 px-2 py-0.5 rounded">中等风险</span>
                                <span class="ml-2 flex items-center">
                                    <i class="fas fa-arrow-down text-green-300 mr-1"></i>
                                    <span>2.3%</span>
                                </span>
                            </div>
                        </div>
                        <!-- 安全管理评分 -->
                        <div class="bg-white border border-gray-200 rounded-lg p-5 relative overflow-hidden">
                            <div class="absolute top-0 right-0 w-24 h-24 -mt-8 -mr-8 opacity-10">
                                <i class="fas fa-tasks text-7xl text-blue-500"></i>
                            </div>
                            <h3 class="text-sm font-medium mb-1 text-gray-600">安全管理评分</h3>
                            <div class="flex items-end space-x-2">
                                <span class="text-3xl font-bold text-gray-800">82.3</span>
                                <span class="text-sm text-gray-500">/ 100</span>
                            </div>
                            <div class="mt-3">
                                <div class="w-full bg-gray-200 rounded-full h-1.5">
                                    <div class="h-1.5 rounded-full bg-blue-500" style="width: 82.3%"></div>
                                </div>
                            </div>
                            <div class="mt-2 flex items-center text-sm">
                                <span class="text-green-600 flex items-center">
                                    <i class="fas fa-arrow-up mr-1"></i>
                                    <span>1.5%</span>
                                </span>
                                <span class="ml-2 text-gray-500">较上周</span>
                            </div>
                        </div>
                        <!-- 设备状态评分 -->
                        <div class="bg-white border border-gray-200 rounded-lg p-5 relative overflow-hidden">
                            <div class="absolute top-0 right-0 w-24 h-24 -mt-8 -mr-8 opacity-10">
                                <i class="fas fa-cogs text-7xl text-orange-500"></i>
                            </div>
                            <h3 class="text-sm font-medium mb-1 text-gray-600">设备状态评分</h3>
                            <div class="flex items-end space-x-2">
                                <span class="text-3xl font-bold text-gray-800">75.8</span>
                                <span class="text-sm text-gray-500">/ 100</span>
                            </div>
                            <div class="mt-3">
                                <div class="w-full bg-gray-200 rounded-full h-1.5">
                                    <div class="h-1.5 rounded-full bg-orange-500" style="width: 75.8%"></div>
                                </div>
                            </div>
                            <div class="mt-2 flex items-center text-sm">
                                <span class="text-red-600 flex items-center">
                                    <i class="fas fa-arrow-down mr-1"></i>
                                    <span>2.1%</span>
                                </span>
                                <span class="ml-2 text-gray-500">较上周</span>
                            </div>
                        </div>
                        <!-- 环境因素评分 -->
                        <div class="bg-white border border-gray-200 rounded-lg p-5 relative overflow-hidden">
                            <div class="absolute top-0 right-0 w-24 h-24 -mt-8 -mr-8 opacity-10">
                                <i class="fas fa-cloud-sun text-7xl text-green-500"></i>
                            </div>
                            <h3 class="text-sm font-medium mb-1 text-gray-600">环境因素评分</h3>
                            <div class="flex items-end space-x-2">
                                <span class="text-3xl font-bold text-gray-800">80.2</span>
                                <span class="text-sm text-gray-500">/ 100</span>
                            </div>
                            <div class="mt-3">
                                <div class="w-full bg-gray-200 rounded-full h-1.5">
                                    <div class="h-1.5 rounded-full bg-green-500" style="width: 80.2%"></div>
                                </div>
                            </div>
                            <div class="mt-2 flex items-center text-sm">
                                <span class="text-green-600 flex items-center">
                                    <i class="fas fa-arrow-up mr-1"></i>
                                    <span>0.8%</span>
                                </span>
                                <span class="ml-2 text-gray-500">较上周</span>
                            </div>
                        </div>
                    </div>
                    <!-- 评分趋势变化曲线图 -->
                    <div>
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-sm font-medium text-gray-700">风险评分趋势</h3>
                            <div class="flex space-x-2">
                                <button v-for="(period, idx) in trendPeriods" :key="idx"
                                    class="px-3 py-1 text-xs rounded !rounded-button whitespace-nowrap cursor-pointer"
                                    :class="selectedTrendPeriod === period.value ? 'bg-blue-100 text-blue-600' : 'bg-gray-100 text-gray-600'"
                                    @click="changeTrendPeriod(period.value)">
                                    {{ period.label }}
                                </button>
                            </div>
                        </div>
                        <div id="riskTrendChart" class="h-72" ref="riskTrendChart"></div>
                    </div>
                </div>
                <!-- 风险因素分析 & 风险等级分布 -->
                <div class="grid grid-cols-2 gap-6 mb-6">
                    <!-- 风险因素分析 -->
                    <div class="bg-white rounded-lg shadow-sm p-6">
                        <div class="flex justify-between items-center mb-6">
                            <h2 class="font-bold text-lg text-gray-800">风险因素分析</h2>
                            <div class="flex space-x-2">
                                <button v-for="(type, idx) in chartTypes" :key="idx"
                                    class="px-3 py-1 text-xs rounded !rounded-button whitespace-nowrap cursor-pointer"
                                    :class="selectedChartType === type.value ? 'bg-blue-100 text-blue-600' : 'bg-gray-100 text-gray-600'"
                                    @click="changeChartType(type.value)">
                                    <i :class="type.icon + ' mr-1'"></i>
                                    {{ type.label }}
                                </button>
                            </div>
                        </div>
                        <div id="riskFactorsChart" class="h-80" ref="riskFactorsChart"></div>
                    </div>
                    <!-- 风险等级分布 -->
                    <div class="bg-white rounded-lg shadow-sm p-6">
                        <div class="flex justify-between items-center mb-6">
                            <h2 class="font-bold text-lg text-gray-800">风险等级分布</h2>
                            <div class="flex items-center">
                                <span class="text-sm text-gray-500 mr-2">区域:</span>
                                <div class="relative">
                                    <button @click="toggleDistributionAreaDropdown"
                                        class="flex items-center space-x-2 bg-gray-100 text-gray-700 px-3 py-1 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer">
                                        <span>{{ selectedAreaForDistribution }}</span>
                                        <i class="fas fa-chevron-down text-xs"></i>
                                    </button>
                                    <!-- 区域选择下拉菜单 -->
                                    <div v-if="showDistributionAreaDropdown"
                                        class="absolute right-0 mt-2 w-40 bg-white rounded-lg shadow-xl z-20">
                                        <div class="py-1">
                                            <a v-for="(area, index) in areaOptions" :key="index"
                                                @click="selectAreaForDistribution(area)"
                                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer">
                                                {{ area }}
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <div id="riskLevelDistributionChart" class="h-72" ref="riskLevelDistributionChart">
                                </div>
                            </div>
                            <div>
                                <h3 class="text-sm font-medium text-gray-700 mb-3">高风险区域 TOP5</h3>
                                <div class="space-y-3">
                                    <div v-for="(area, index) in topRiskAreas" :key="index" class="flex items-center">
                                        <div class="w-8 text-center font-medium text-gray-500">{{ index + 1 }}</div>
                                        <div class="flex-1">
                                            <div class="flex justify-between items-center mb-1">
                                                <span class="text-sm font-medium">{{ area.name }}</span>
                                                <span class="text-sm font-bold"
                                                    :class="getRiskScoreColor(area.score)">{{ area.score }}</span>
                                            </div>
                                            <div class="w-full bg-gray-200 rounded-full h-1.5">
                                                <div class="h-1.5 rounded-full" :style="{ width: area.score + '%' }"
                                                    :class="getRiskScoreBarColor(area.score)"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 风险趋势分析 -->
                <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
                    <div class="flex justify-between items-center mb-6">
                        <h2 class="font-bold text-lg text-gray-800">风险趋势分析</h2>
                        <div class="flex items-center space-x-3">
                            <div class="flex items-center">
                                <span class="text-sm text-gray-500 mr-2">区域:</span>
                                <div class="relative">
                                    <button @click="toggleTrendAreaDropdown"
                                        class="flex items-center space-x-2 bg-gray-100 text-gray-700 px-3 py-1 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer">
                                        <span>{{ selectedAreaForTrend }}</span>
                                        <i class="fas fa-chevron-down text-xs"></i>
                                    </button>
                                    <!-- 区域选择下拉菜单 -->
                                    <div v-if="showTrendAreaDropdown"
                                        class="absolute right-0 mt-2 w-40 bg-white rounded-lg shadow-xl z-20">
                                        <div class="py-1">
                                            <a v-for="(area, index) in areaOptions" :key="index"
                                                @click="selectAreaForTrend(area)"
                                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer">
                                                {{ area }}
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-center">
                                <span class="text-sm text-gray-500 mr-2">时间范围:</span>
                                <div class="relative">
                                    <button @click="toggleTrendTimeDropdown"
                                        class="flex items-center space-x-2 bg-gray-100 text-gray-700 px-3 py-1 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer">
                                        <span>{{ selectedTrendTimeRange }}</span>
                                        <i class="fas fa-chevron-down text-xs"></i>
                                    </button>
                                    <!-- 时间范围下拉菜单 -->
                                    <div v-if="showTrendTimeDropdown"
                                        class="absolute right-0 mt-2 w-40 bg-white rounded-lg shadow-xl z-20">
                                        <div class="py-1">
                                            <a v-for="(timeRange, index) in trendTimeRanges" :key="index"
                                                @click="selectTrendTimeRange(timeRange)"
                                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer">
                                                {{ timeRange.label }}
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="grid grid-cols-4 gap-4 mb-6">
                        <div v-for="(stat, index) in trendStats" :key="index" class="bg-gray-50 rounded-lg p-4">
                            <div class="flex items-center justify-between">
                                <h3 class="text-sm font-medium text-gray-600">{{ stat.name }}</h3>
                                <span class="flex items-center text-xs"
                                    :class="stat.change > 0 ? 'text-red-600' : 'text-green-600'">
                                    <i :class="stat.change > 0 ? 'fas fa-arrow-up' : 'fas fa-arrow-down'"
                                        class="mr-1"></i>
                                    {{ Math.abs(stat.change) }}%
                                </span>
                            </div>
                            <div class="mt-2">
                                <span class="text-2xl font-bold text-gray-800">{{ stat.value }}</span>
                            </div>
                        </div>
                    </div>
                    <div id="riskTrendAnalysisChart" class="h-72" ref="riskTrendAnalysisChart"></div>
                </div>
                <!-- 高风险区域预警列表 -->
                <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
                    <div class="flex justify-between items-center mb-6">
                        <h2 class="font-bold text-lg text-gray-800">高风险区域预警列表</h2>
                        <div class="flex items-center space-x-3">
                            <div class="relative">
                                <input type="text" placeholder="搜索区域或风险因素" v-model="searchKeyword"
                                    class="bg-gray-100 border-none rounded px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 w-64"
                                    @keyup.enter="searchHighRiskWarnings">
                                <i @click="searchHighRiskWarnings"
                                    class="fas fa-search absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 cursor-pointer"></i>
                            </div>

                        </div>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead>
                                <tr>
                                    <th
                                        class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        区域名称</th>
                                    <th
                                        class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        风险等级</th>
                                    <th
                                        class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        主要风险因素</th>
                                    <th
                                        class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        预警时间</th>
                                    <th
                                        class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        处理状态</th>
                                    <th
                                        class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        操作</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                <tr v-for="(warning, index) in paginatedHighRiskWarnings" :key="index"
                                    class="hover:bg-gray-50">
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <div class="flex-shrink-0 h-8 w-8 rounded-full flex items-center justify-center"
                                                :class="warning.iconBg">
                                                <i :class="warning.icon + ' text-white text-xs'"></i>
                                            </div>
                                            <div class="ml-3">
                                                <div class="text-sm font-medium text-gray-900">{{ warning.area }}</div>
                                                <div class="text-xs text-gray-500">{{ warning.location }}</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full"
                                            :class="warning.levelClass">
                                            {{ warning.level }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm text-gray-900">{{ warning.riskFactor }}</div>
                                        <div class="text-xs text-gray-500">{{ warning.riskDetail }}</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm text-gray-900">{{ warning.date }}</div>
                                        <div class="text-xs text-gray-500">{{ warning.time }}</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full"
                                            :class="warning.statusClass">
                                            {{ warning.status }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                        <div class="flex space-x-2">
                                            <button
                                                class="text-blue-600 hover:text-blue-800 !rounded-button whitespace-nowrap cursor-pointer"
                                                @click="showWarningDetail(warning)">查看</button>
                                            <button @click="processWarning(warning)"
                                                class="text-green-600 hover:text-green-800 !rounded-button whitespace-nowrap cursor-pointer">处理</button>
                                        </div>
                                        <!-- 预警详情模态框 -->
                                        <div v-if="showDetailModal"
                                            class="fixed inset-0 bg-gray-600 bg-opacity-30 z-50 flex items-center justify-center">
                                            <div
                                                class="bg-white rounded-lg w-4/5 max-h-[90vh] overflow-hidden shadow-xl">
                                                <!-- 模态框头部 -->
                                                <div
                                                    class="px-6 py-4 border-b border-gray-200 flex justify-between items-center bg-blue-50">
                                                    <h3 class="text-xl font-bold text-gray-800">预警详情</h3>
                                                    <button @click="showDetailModal = false"
                                                        class="text-gray-500 hover:text-gray-700">
                                                        <i class="fas fa-times"></i>
                                                    </button>
                                                </div>
                                                <!-- 模态框内容 -->
                                                <div class="p-6 overflow-y-auto max-h-[calc(90vh-8rem)]">
                                                    <!-- 基本信息 -->
                                                    <div class="mb-8">
                                                        <h4 class="text-lg font-medium text-gray-800 mb-4">区域基本信息</h4>
                                                        <div class="grid grid-cols-2 gap-6">
                                                            <div class="bg-gray-50 p-4 rounded-lg">
                                                                <div class="flex items-center mb-2">
                                                                    <div class="w-8 h-8 rounded-full flex items-center justify-center"
                                                                        :class="selectedWarning.iconBg">
                                                                        <i
                                                                            :class="selectedWarning.icon + ' text-white'"></i>
                                                                    </div>
                                                                    <span class="ml-2 font-medium text-gray-700">{{
                                                                        selectedWarning.area }}</span>
                                                                </div>
                                                                <div class="space-y-2 text-sm text-gray-600">
                                                                    <p>位置: {{ selectedWarning.location }}</p>
                                                                    <p>预警时间: {{ selectedWarning.date }} {{
                                                                        selectedWarning.time }}</p>
                                                                    <p>状态: <span :class="selectedWarning.statusClass"
                                                                            class="px-2 py-0.5 rounded-full text-xs">{{
                                                                                selectedWarning.status }}</span></p>
                                                                </div>
                                                            </div>
                                                            <div class="bg-gray-50 p-4 rounded-lg">
                                                                <h5 class="font-medium text-gray-700 mb-2">风险等级评估</h5>
                                                                <div class="space-y-3">
                                                                    <div>
                                                                        <div
                                                                            class="flex justify-between items-center mb-1">
                                                                            <span
                                                                                class="text-sm text-gray-600">综合风险指数</span>
                                                                            <span class="font-bold"
                                                                                :class="getRiskScoreColor(selectedWarning.riskScore)">{{
                                                                                    selectedWarning.riskScore }}</span>
                                                                        </div>
                                                                        <div
                                                                            class="w-full bg-gray-200 rounded-full h-2">
                                                                            <div class="h-2 rounded-full"
                                                                                :class="getRiskScoreBarColor(selectedWarning.riskScore)"
                                                                                :style="{ width: selectedWarning.riskScore + '%' }">
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="flex items-center justify-between">
                                                                        <span class="text-sm text-gray-600">风险等级:</span>
                                                                        <span :class="selectedWarning.levelClass"
                                                                            class="px-2 py-0.5 rounded-full text-xs">{{
                                                                                selectedWarning.level }}</span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- 风险评估详情 -->
                                                    <div class="mb-8">
                                                        <h4 class="text-lg font-medium text-gray-800 mb-4">风险评估详情</h4>
                                                        <div class="bg-gray-50 p-4 rounded-lg">
                                                            <div class="mb-4">
                                                                <h5 class="font-medium text-gray-700 mb-2">主要风险因素</h5>
                                                                <p class="text-gray-600">{{ selectedWarning.riskFactor
                                                                    }}</p>
                                                                <p class="text-sm text-gray-500 mt-1">{{
                                                                    selectedWarning.riskDetail }}</p>
                                                            </div>
                                                            <div>
                                                                <h5 class="font-medium text-gray-700 mb-2">风险指标分析</h5>
                                                                <div id="riskDetailChart" ref="riskDetailChart"
                                                                    class="h-64">
                                                                    <div
                                                                        class="flex items-center justify-center h-full text-gray-500">
                                                                        <div class="space-y-4 text-center">
                                                                            <div class="text-lg font-medium">风险评估详情
                                                                            </div>
                                                                            <div class="grid grid-cols-3 gap-4">
                                                                                <div
                                                                                    class="bg-white p-3 rounded-lg shadow-sm">
                                                                                    <div class="text-sm text-gray-600">
                                                                                        设备状态</div>
                                                                                    <div
                                                                                        class="text-xl font-bold text-blue-600 mt-1">
                                                                                        65%</div>
                                                                                </div>
                                                                                <div
                                                                                    class="bg-white p-3 rounded-lg shadow-sm">
                                                                                    <div class="text-sm text-gray-600">
                                                                                        运行参数</div>
                                                                                    <div
                                                                                        class="text-xl font-bold text-green-600 mt-1">
                                                                                        75%</div>
                                                                                </div>
                                                                                <div
                                                                                    class="bg-white p-3 rounded-lg shadow-sm">
                                                                                    <div class="text-sm text-gray-600">
                                                                                        维护记录</div>
                                                                                    <div
                                                                                        class="text-xl font-bold text-orange-600 mt-1">
                                                                                        70%</div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="text-sm text-gray-500 mt-4">
                                                                                点击各指标可查看详细数据</div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- 实时监测数据 -->
                                                    <div class="mb-8">
                                                        <h4 class="text-lg font-medium text-gray-800 mb-4">实时监测数据</h4>
                                                        <div class="bg-gray-50 p-4 rounded-lg">
                                                            <div id="monitoringDataChart" ref="monitoringDataChart"
                                                                class="h-64">
                                                                <div
                                                                    class="flex items-center justify-center h-full text-gray-500">
                                                                    <div class="space-y-4 text-center">
                                                                        <div class="text-lg font-medium">实时监测数据</div>
                                                                        <div class="grid grid-cols-3 gap-4">
                                                                            <div
                                                                                class="bg-white p-3 rounded-lg shadow-sm">
                                                                                <div class="text-sm text-gray-600">温度
                                                                                </div>
                                                                                <div
                                                                                    class="text-xl font-bold text-red-600 mt-1">
                                                                                    150°C</div>
                                                                            </div>
                                                                            <div
                                                                                class="bg-white p-3 rounded-lg shadow-sm">
                                                                                <div class="text-sm text-gray-600">压力
                                                                                </div>
                                                                                <div
                                                                                    class="text-xl font-bold text-blue-600 mt-1">
                                                                                    3.1MPa</div>
                                                                            </div>
                                                                            <div
                                                                                class="bg-white p-3 rounded-lg shadow-sm">
                                                                                <div class="text-sm text-gray-600">流量
                                                                                </div>
                                                                                <div
                                                                                    class="text-xl font-bold text-green-600 mt-1">
                                                                                    88m³/h</div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="text-sm text-gray-500 mt-4">
                                                                            点击各指标可查看历史趋势</div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- 历史预警记录 -->
                                                    <div class="mb-8">
                                                        <h4 class="text-lg font-medium text-gray-800 mb-4">历史预警记录</h4>
                                                        <div class="bg-gray-50 p-4 rounded-lg">
                                                            <div class="overflow-x-auto">
                                                                <table class="min-w-full divide-y divide-gray-200">
                                                                    <thead>
                                                                        <tr>
                                                                            <th
                                                                                class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
                                                                                时间</th>
                                                                            <th
                                                                                class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
                                                                                风险等级</th>
                                                                            <th
                                                                                class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
                                                                                风险因素</th>
                                                                            <th
                                                                                class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
                                                                                处理状态</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody class="divide-y divide-gray-200">
                                                                        <tr v-for="(record, index) in historyRecords"
                                                                            :key="index" class="hover:bg-gray-100">
                                                                            <td class="px-4 py-3 text-sm text-gray-900">
                                                                                {{ record.date }}</td>
                                                                            <td class="px-4 py-3">
                                                                                <span :class="record.levelClass"
                                                                                    class="px-2 py-0.5 rounded-full text-xs">{{
                                                                                        record.level }}</span>
                                                                            </td>
                                                                            <td class="px-4 py-3 text-sm text-gray-600">
                                                                                {{ record.factor }}</td>
                                                                            <td class="px-4 py-3">
                                                                                <span :class="record.statusClass"
                                                                                    class="px-2 py-0.5 rounded-full text-xs">{{
                                                                                        record.status }}</span>
                                                                            </td>
                                                                        </tr>
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- 处理建议 -->
                                                    <div>
                                                        <h4 class="text-lg font-medium text-gray-800 mb-4">处理建议</h4>
                                                        <div class="bg-gray-50 p-4 rounded-lg">
                                                            <div class="space-y-3">
                                                                <div v-for="(suggestion, index) in selectedWarning.suggestions"
                                                                    :key="index">
                                                                    <div class="flex items-start">
                                                                        <i
                                                                            class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
                                                                        <span class="text-gray-600">{{ suggestion
                                                                            }}</span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!-- 模态框底部 -->
                                                <div
                                                    class="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3 bg-gray-50">
                                                    <button @click="showDetailModal = false"
                                                        class="px-4 py-2 border border-gray-300 rounded text-gray-700 hover:bg-gray-100 !rounded-button whitespace-nowrap cursor-pointer">关闭</button>
                                                    <button
                                                        class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 !rounded-button whitespace-nowrap cursor-pointer"
                                                        @click="handleWarning">立即处理</button>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- 风险处理表单模态框 -->
                    <div v-if="showHandlingModal"
                        class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
                        <div class="bg-white rounded-lg w-2/3 max-h-[90vh] overflow-hidden shadow-xl">
                            <!-- 模态框头部 -->
                            <div
                                class="px-6 py-4 border-b border-gray-200 flex justify-between items-center bg-blue-50">
                                <h3 class="text-xl font-bold text-gray-800">风险处理</h3>
                                <button @click="showHandlingModal = false" class="text-gray-500 hover:text-gray-700">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>

                            <!-- 模态框内容 -->
                            <div class="p-6">
                                <form @submit.prevent="submitHandling" id="risk-handling-form" class="space-y-6">
                                    <!-- 处理措施选择 -->
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">处理措施</label>
                                        <div class="relative">
                                            <select v-model="handlingForm.measure" name="measure"
                                                class="w-full bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5"
                                                required>
                                                <option value="">请选择处理措施</option>
                                                <option v-for="measure in handlingMeasures" :key="measure.value"
                                                    :value="measure.value">
                                                    {{ measure.label }}
                                                </option>
                                            </select>
                                        </div>
                                    </div>

                                    <!-- 处理详情描述 -->
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">处理详情</label>
                                        <textarea v-model="handlingForm.description" name="description" rows="4"
                                            class="w-full bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5"
                                            placeholder="请详细描述处理措施的具体内容..." maxlength="500" required></textarea>
                                        <div class="text-xs text-gray-500 mt-1">{{ handlingForm.description.length
                                            }}/500</div>
                                    </div>

                                    <!-- 处理人员选择 -->
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">处理人员</label>
                                        <div class="relative">
                                            <select v-model="handlingForm.handler" name="handler"
                                                class="w-full bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5"
                                                required>
                                                <option value="">请选择处理人员</option>
                                                <option v-for="handler in handlers" :key="handler.value"
                                                    :value="handler.value">
                                                    {{ handler.label }}
                                                </option>
                                            </select>
                                        </div>
                                    </div>

                                    <!-- 预计完成时间 -->
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">预计完成时间</label>
                                        <input type="datetime-local" v-model="handlingForm.expectedTime"
                                            name="expectedTime"
                                            class="w-full bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5"
                                            required>
                                    </div>

                                    <!-- 文件上传 -->
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">相关文件</label>
                                        <div
                                            class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg">
                                            <div class="space-y-1 text-center">
                                                <i class="fas fa-cloud-upload-alt text-gray-400 text-3xl mb-3"></i>
                                                <div class="flex text-sm text-gray-600">
                                                    <label for="file-upload"
                                                        class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-blue-500">
                                                        <span>上传文件</span>
                                                        <input id="file-upload" type="file" class="sr-only" multiple
                                                            @change="handleFileUpload">
                                                    </label>
                                                    <p class="pl-1">或拖拽文件到这里</p>
                                                </div>
                                                <p class="text-xs text-gray-500">支持任意类型文件，单个文件不超过10MB</p>
                                            </div>
                                        </div>
                                        <div v-if="handlingForm.files.length > 0" class="mt-2">
                                            <div v-for="(file, index) in handlingForm.files" :key="index"
                                                class="flex items-center justify-between py-2">
                                                <span class="text-sm text-gray-500">{{ file.name }}</span>
                                                <button type="button" @click="removeFile(index)"
                                                    class="text-red-500 hover:text-red-700">
                                                    <i class="fas fa-times"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>

                            <!-- 模态框底部 -->
                            <div class="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3 bg-gray-50">
                                <button @click="showHandlingModal = false"
                                    class="px-4 py-2 border border-gray-300 rounded text-gray-700 hover:bg-gray-100 !rounded-button whitespace-nowrap cursor-pointer">取消</button>
                                <button form="risk-handling-form" type="submit"
                                    class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 !rounded-button whitespace-nowrap cursor-pointer">提交处理</button>
                            </div>
                        </div>
                    </div>

                    <!-- 风险处理建议详情模态框 -->
                    <div v-if="showSuggestionDetailModal"
                        class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
                        <div class="bg-white rounded-lg w-2/3 max-h-[90vh] overflow-hidden shadow-xl">
                            <!-- 模态框头部 -->
                            <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center"
                                :class="selectedSuggestion.iconBg">
                                <h3 class="text-xl font-bold text-white">{{ selectedSuggestion.title }}</h3>
                                <button @click="showSuggestionDetailModal = false"
                                    class="text-white hover:text-gray-200">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>

                            <!-- 模态框内容 -->
                            <div class="p-6 overflow-y-auto max-h-[70vh]">
                                <div class="mb-6">
                                    <div class="flex justify-between items-start mb-4">
                                        <div>
                                            <h4 class="text-lg font-medium text-gray-800 mb-1">{{
                                                selectedSuggestion.area }}</h4>
                                            <div class="flex items-center text-sm text-gray-600">
                                                <span class="mr-3">优先级: <span class="font-medium">{{
                                                    selectedSuggestion.priority }}</span></span>
                                                <span>更新于: <span class="font-medium">{{ selectedSuggestion.updatedAt
                                                        }}</span></span>
                                            </div>
                                        </div>
                                        <span class="px-3 py-1 text-sm rounded-full"
                                            :class="selectedSuggestion.statusClass">
                                            {{ selectedSuggestion.status }}
                                        </span>
                                    </div>
                                    <p class="text-gray-700 mb-4">{{ selectedSuggestion.description }}</p>
                                </div>

                                <div class="mb-6">
                                    <h4 class="text-lg font-medium text-gray-800 mb-3">建议措施</h4>
                                    <div class="bg-gray-50 p-4 rounded-lg">
                                        <ul class="space-y-3">
                                            <li v-for="(measure, index) in selectedSuggestion.measures" :key="index"
                                                class="flex items-start">
                                                <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
                                                <div>
                                                    <p class="text-gray-700">{{ measure }}</p>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                                <div class="mb-6">
                                    <h4 class="text-lg font-medium text-gray-800 mb-3">预期效果</h4>
                                    <div class="bg-gray-50 p-4 rounded-lg">
                                        <p class="text-gray-700">实施上述建议措施后，预计可以有效降低{{ selectedSuggestion.title }}相关的风险，
                                            提高系统稳定性和安全性，减少潜在的生产中断和安全事故。</p>
                                    </div>
                                </div>
                            </div>

                            <!-- 模态框底部 -->
                            <div class="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3 bg-gray-50">
                                <button @click="showSuggestionDetailModal = false"
                                    class="px-4 py-2 border border-gray-300 rounded text-gray-700 hover:bg-gray-100 !rounded-button whitespace-nowrap cursor-pointer">
                                    关闭
                                </button>
                                <button @click="handleSuggestion(selectedSuggestion)"
                                    class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 !rounded-button whitespace-nowrap cursor-pointer">
                                    处理建议
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 风险处理建议处理模态框 -->
                    <div v-if="showSuggestionHandlingModal"
                        class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
                        <div class="bg-white rounded-lg w-2/3 max-h-[90vh] overflow-hidden shadow-xl">
                            <!-- 模态框头部 -->
                            <div
                                class="px-6 py-4 border-b border-gray-200 flex justify-between items-center bg-blue-50">
                                <h3 class="text-xl font-bold text-gray-800">处理风险建议</h3>
                                <button @click="showSuggestionHandlingModal = false"
                                    class="text-gray-500 hover:text-gray-700">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>

                            <!-- 模态框内容 -->
                            <div class="p-6">
                                <form @submit.prevent="submitSuggestionHandling" id="suggestion-handling-form"
                                    class="space-y-6">
                                    <!-- 建议标题 -->
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">建议标题</label>
                                        <input type="text" disabled :value="selectedSuggestion.title"
                                            class="w-full bg-gray-100 border border-gray-300 text-gray-900 rounded-lg p-2.5">
                                    </div>

                                    <!-- 处理状态选择 -->
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">处理状态</label>
                                        <div class="relative">
                                            <select v-model="suggestionHandlingForm.status" name="status"
                                                class="w-full bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5"
                                                required>
                                                <option value="">请选择处理状态</option>
                                                <option value="进行中">进行中</option>
                                                <option value="已完成">已完成</option>
                                                <option value="已拒绝">已拒绝</option>
                                            </select>
                                        </div>
                                    </div>

                                    <!-- 处理详情描述 -->
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">处理详情</label>
                                        <textarea v-model="suggestionHandlingForm.description" name="description"
                                            rows="4"
                                            class="w-full bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5"
                                            placeholder="请详细描述处理措施的具体内容..." maxlength="500" required></textarea>
                                        <div class="text-xs text-gray-500 mt-1">{{
                                            suggestionHandlingForm.description.length }}/500</div>
                                    </div>

                                    <!-- 处理人员 -->
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">处理人员</label>
                                        <input type="text" v-model="suggestionHandlingForm.handler" name="handler"
                                            class="w-full bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5"
                                            placeholder="请输入处理人员姓名" required>
                                    </div>

                                    <!-- 预计完成时间 -->
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">预计完成时间</label>
                                        <input type="date" v-model="suggestionHandlingForm.expectedTime"
                                            name="expectedTime"
                                            class="w-full bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5"
                                            required>
                                    </div>
                                </form>
                            </div>

                            <!-- 模态框底部 -->
                            <div class="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3 bg-gray-50">
                                <button @click="showSuggestionHandlingModal = false"
                                    class="px-4 py-2 border border-gray-300 rounded text-gray-700 hover:bg-gray-100 !rounded-button whitespace-nowrap cursor-pointer">取消</button>
                                <button form="suggestion-handling-form" type="submit"
                                    class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 !rounded-button whitespace-nowrap cursor-pointer">提交处理</button>
                            </div>
                        </div>
                    </div>

                    <!-- 成功提示 -->
                    <div v-if="showSuccessMessage"
                        class="fixed top-4 right-4 bg-green-100 border-l-4 border-green-500 text-green-700 p-4 rounded shadow-lg z-50">
                        <div class="flex items-center">
                            <i class="fas fa-check-circle mr-2"></i>
                            <p>处理方案提交成功！</p>
                        </div>
                    </div>
                </div>
                <div v-if="paginatedHighRiskWarnings.length === 0" class="text-center py-8 text-gray-500">
                    <i class="fas fa-inbox text-3xl mb-2"></i>
                    <p>暂无数据</p>
                </div>
                <div class="flex justify-between items-center mt-4">
                    <div class="text-sm text-gray-500">
                        显示
                        <span v-if="filteredHighRiskWarnings.length > 0">
                            {{ (Math.min(currentPage, totalPages || 1) - 1) * pageSize + 1 }}
                            至
                            {{ Math.min(Math.min(currentPage, totalPages || 1) * pageSize,
                                filteredHighRiskWarnings.length) }}
                        </span>
                        <span v-else>0</span>
                        条，共 {{ filteredHighRiskWarnings.length }} 条
                    </div>
                    <div class="flex space-x-1">
                        <button
                            class="px-3 py-1 bg-gray-100 text-gray-600 rounded !rounded-button whitespace-nowrap cursor-pointer"
                            :disabled="currentPage <= 1 || loading" @click="goToPage(currentPage - 1)">
                            上一页
                        </button>

                        <template v-for="page in pageNumbers" :key="page">
                            <button v-if="page !== '...'"
                                class="px-3 py-1 rounded !rounded-button whitespace-nowrap cursor-pointer"
                                :class="page === currentPage ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-600'"
                                :disabled="loading" @click="goToPage(page)">
                                {{ page }}
                            </button>
                            <span v-else class="px-3 py-1 text-gray-600 flex items-center">
                                {{ page }}
                            </span>
                        </template>

                        <button
                            class="px-3 py-1 bg-gray-100 text-gray-600 rounded !rounded-button whitespace-nowrap cursor-pointer"
                            :disabled="currentPage >= totalPages || loading || totalPages === 0"
                            @click="goToPage(currentPage + 1)">
                            下一页
                        </button>
                    </div>
                </div>

                <!-- 在表格上方添加加载状态指示器 -->
                <div v-if="loading" class="loading-overlay">
                    <div class="text-blue-600">加载中...</div>
                </div>
            </div>
            <!-- 风险处理建议 -->
            <div class="bg-white rounded-lg shadow-sm p-6">
                <div class="flex justify-between items-center mb-6">
                    <h2 class="font-bold text-lg text-gray-800">风险处理建议</h2>
                    <button @click="refreshSuggestions"
                        class="px-4 py-2 bg-blue-600 text-white rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer">
                        <i class="fas fa-sync-alt mr-2"></i> 更新建议
                    </button>
                </div>
                <div class="grid grid-cols-2 gap-6">
                    <div v-for="(suggestion, index) in riskSuggestions" :key="index"
                        class="bg-gray-50 rounded-lg p-5 border-l-4" :class="suggestion.borderColor">
                        <div class="flex justify-between items-start mb-3">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-full flex items-center justify-center"
                                    :class="suggestion.iconBg">
                                    <i :class="suggestion.icon + ' text-white'"></i>
                                </div>
                                <div class="ml-3">
                                    <h3 class="font-medium text-gray-800">{{ suggestion.title }}</h3>
                                    <p class="text-xs text-gray-500">{{ suggestion.area }} · 优先级: {{ suggestion.priority
                                        }}</p>
                                </div>
                            </div>
                            <span class="px-2 py-1 text-xs rounded-full" :class="suggestion.statusClass">{{
                                suggestion.status }}</span>
                        </div>
                        <p class="text-sm text-gray-600 mb-3">{{ suggestion.description }}</p>
                        <div class="bg-white rounded p-3 border border-gray-200">
                            <h4 class="text-sm font-medium text-gray-700 mb-2">建议措施:</h4>
                            <ul class="text-sm text-gray-600 space-y-1">
                                <li v-for="(measure, midx) in suggestion.measures" :key="midx" class="flex items-start">
                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                    <span>{{ measure }}</span>
                                </li>
                            </ul>
                        </div>
                        <div class="mt-4 flex justify-between items-center">
                            <div class="text-xs text-gray-500">更新于: {{ suggestion.updatedAt }}</div>
                            <div class="flex space-x-2">
                                <button @click="showSuggestionDetail(suggestion)"
                                    class="px-3 py-1 bg-gray-200 text-gray-700 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer">详情</button>
                                <button @click="executeSuggestion(index)"
                                    class="px-3 py-1 bg-blue-600 text-white rounded text-sm !rounded-button whitespace-nowrap cursor-pointer">执行</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</template>
<script>
import * as echarts from 'echarts';
import Header from '../components/Header.vue';
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
    components: {
    Header,
  },
    data() {
        return {
            // 日期范围相关数据
            selectedDateRange: '最近 7 天',
            showDateDropdown: false,
            dateRanges: ['最近 7 天', '最近 30 天', '最近 90 天'],
            showDetailModal: false,
            showHandlingModal: false,
            showSuggestionDetailModal: false,
            showSuggestionHandlingModal: false,
            selectedWarning: null,
            warningToProcess: null,
            selectedSuggestion: null,
            currentPage: 1,
            pageSize: 5,
            totalItems: 28,
            suggestionHandlingForm: {
                status: '',
                description: '',
                handler: '',
                expectedTime: '',
            },
            handlingForm: {
                measure: '',
                description: '',
                handler: '',
                expectedTime: '',
                files: []
            },
            handlingMeasures: [
                { value: 'equipment_repair', label: '设备维修' },
                { value: 'system_upgrade', label: '系统升级' },
                { value: 'parameter_adjustment', label: '参数调整' },
                { value: 'emergency_response', label: '应急响应' },
                { value: 'personnel_training', label: '人员培训' }
            ],
            handlers: [
                { value: 'zhang_san', label: '张三 - 设备维护主管' },
                { value: 'li_si', label: '李四 - 安全工程师' },
                { value: 'wang_wu', label: '王五 - 运维专员' }
            ],
            showSuccessMessage: false,
            historyRecords: [
                {
                    date: '2025-07-07 15:32:18',
                    level: '高风险',
                    levelClass: 'bg-red-100 text-red-800',
                    factor: '设备老化 - 冷却系统效率降低',
                    status: '已处理',
                    statusClass: 'bg-green-100 text-green-800'
                },
                {
                    date: '2025-07-06 09:15:43',
                    level: '中风险',
                    levelClass: 'bg-orange-100 text-orange-800',
                    factor: '温度异常 - 冷却水温度升高',
                    status: '已处理',
                    statusClass: 'bg-green-100 text-green-800'
                },
                {
                    date: '2025-07-05 11:28:56',
                    level: '高风险',
                    levelClass: 'bg-red-100 text-red-800',
                    factor: '设备老化 - 管道压力异常',
                    status: '已处理',
                    statusClass: 'bg-green-100 text-green-800'
                }
            ],
            mainMenus: [
                {
                    name: '监测报警',
                    icon: 'fas fa-bell',
                    expanded: false,
                    active: false,
                    subMenus: [
                        { name: '数据汇聚功能', active: false, link: '/data-aggregation' },
                        { name: '监测指标统计', active: false, link: '/monitoring-indicators' },
                        { name: '区域化展示', active: false, link: '/regional-display' }
                    ]
                },
                {
                    name: '风险研判',
                    icon: 'fas fa-exclamation-triangle',
                    expanded: true,
                    active: true,
                    subMenus: [
                        { name: '智能风险评估', active: true, link: '/intelligent-risk-assessment' },
                        { name: '预警信息推送', active: false, link: '/risk-warning-push' },
                        { name: '风险管理与分析', active: false, link: '/risk-analysis' },
                        // { name: '重点风险提示', active: false, link: '/focus' },
                    ]
                },
                {
                    name: '在线巡查',
                    icon: 'fas fa-search',
                    expanded: false,
                    active: false,
                    subMenus: [
                        { name: '企业信息汇总', active: false, link: '/summary-information' },
                        { name: '巡查功能', active: false, link: '/patrol' },
                        { name: '检索功能', active: false, link: 'search' },
                        { name: '一屏汇聚展示', active: false, link: '/screen-display' }
                    ]
                },
                {
                    name: '综合分析',
                    icon: 'fas fa-chart-line',
                    expanded: false,
                    active: false,
                    subMenus: [
                        { name: '联网与设备分析', active: false, link: '/equipment' },
                        { name: '应用情况分析', active: false, link: '/application' },
                        { name: '数据质量分析', active: false, link: '/data-quality' },
                        { name: '定期专题报告', active: false, link: 'report' }
                    ]
                },
                {
                    name: '系统管理',
                    icon: 'fas fa-cog',
                    expanded: false,
                    active: false,
                    subMenus: [
                        { name: '用户权限管理', active: false, link: 'user-permission' },
                        { name: '系统配置管理', active: false, link: 'system-manage' },
                        { name: '数据管理', active: false, link: 'data-manage' },
                        { name: '系统监控与维护', active: false, link: 'monitoring' }
                    ]
                }
            ],
            trendPeriods: [
                { label: '近 7 天', value: '7days' },
                { label: '近 30 天', value: '30days' },
                { label: '近 90 天', value: '90days' },
                { label: '近 1 年', value: '1year' }
            ],
            selectedTrendPeriod: '30days',
            chartTypes: [
                { label: '雷达图', value: 'radar', icon: 'fas fa-spider' },
                { label: '柱状图', value: 'bar', icon: 'fas fa-chart-bar' },
                { label: '饼图', value: 'pie', icon: 'fas fa-chart-pie' }
            ],
            selectedChartType: 'radar',
            selectedAreaForDistribution: '全部区域',
            selectedAreaForTrend: '全部区域',
            showDistributionAreaDropdown: false,
            areaOptions: ['全部区域', '炼铁厂', '炼钢厂', '烧结厂', '轧钢厂', '动力厂'],
            showTrendAreaDropdown: false,
            showTrendTimeDropdown: false,
            selectedTrendTimeRange: '近30天',
            trendTimeRanges: [
                { label: '近7天', value: '7days' },
                { label: '近30天', value: '30days' },
                { label: '近90天', value: '90days' },
                { label: '近半年', value: '180days' },
                { label: '近一年', value: '365days' }
            ],
            topRiskAreas: [
                { name: '炼铁厂 - 3号高炉', score: 85.2 },
                { name: '炼钢厂 - 2号转炉', score: 78.9 },
                { name: '烧结厂 - 1号烧结机', score: 76.5 },
                { name: '轧钢厂 - 热轧生产线', score: 72.3 },
                { name: '动力厂 - 锅炉房', score: 68.7 }
            ],
            trendStats: [
                { name: '高风险事件', value: 28, change: -5.2 },
                { name: '中风险事件', value: 45, change: 2.8 },
                { name: '低风险事件', value: 76, change: -12.4 },
                { name: '平均风险指数', value: '72.5', change: -3.1 }
            ],
            searchKeyword: '',
            highRiskWarnings: [
                {
                    area: '炼铁厂',
                    location: '3号高炉',
                    icon: 'fas fa-fire',
                    iconBg: 'bg-red-600',
                    level: '高风险',
                    levelClass: 'bg-red-100 text-red-800',
                    riskFactor: '设备老化',
                    riskDetail: '高炉壁冷却系统效率下降',
                    date: '2025-07-08',
                    time: '09:45:12',
                    status: '待处理',
                    statusClass: 'bg-yellow-100 text-yellow-800'
                },
                {
                    area: '炼钢厂',
                    location: '2号转炉',
                    icon: 'fas fa-industry',
                    iconBg: 'bg-orange-600',
                    level: '高风险',
                    levelClass: 'bg-red-100 text-red-800',
                    riskFactor: '温度异常',
                    riskDetail: '转炉温度波动超过安全阈值',
                    date: '2025-07-08',
                    time: '08:32:45',
                    status: '处理中',
                    statusClass: 'bg-blue-100 text-blue-800'
                },
                {
                    area: '烧结厂',
                    location: '1号烧结机',
                    icon: 'fas fa-burn',
                    iconBg: 'bg-yellow-600',
                    level: '中风险',
                    levelClass: 'bg-orange-100 text-orange-800',
                    riskFactor: '排放超标',
                    riskDetail: '废气处理系统效率降低',
                    date: '2025-07-07',
                    time: '16:18:33',
                    status: '已处理',
                    statusClass: 'bg-green-100 text-green-800'
                },
                {
                    area: '轧钢厂',
                    location: '热轧生产线',
                    icon: 'fas fa-cogs',
                    iconBg: 'bg-blue-600',
                    level: '中风险',
                    levelClass: 'bg-orange-100 text-orange-800',
                    riskFactor: '机械故障',
                    riskDetail: '轧机传动系统异常振动',
                    date: '2025-07-07',
                    time: '14:52:19',
                    status: '待处理',
                    statusClass: 'bg-yellow-100 text-yellow-800'
                },
                {
                    area: '动力厂',
                    location: '锅炉房',
                    icon: 'fas fa-bolt',
                    iconBg: 'bg-purple-600',
                    level: '高风险',
                    levelClass: 'bg-red-100 text-red-800',
                    riskFactor: '压力异常',
                    riskDetail: '蒸汽管道压力超过安全值',
                    date: '2025-07-07',
                    time: '11:24:56',
                    status: '处理中',
                    statusClass: 'bg-blue-100 text-blue-800'
                },
                {
                    area: '炼铁厂',
                    location: '4号高炉',
                    icon: 'fas fa-fire',
                    iconBg: 'bg-red-600',
                    level: '高风险',
                    levelClass: 'bg-red-100 text-red-800',
                    riskFactor: '设备老化',
                    riskDetail: '高炉壁冷却系统效率下降',
                    date: '2025-07-07',
                    time: '11:24:56',
                    status: '处理中',
                    statusClass: 'bg-blue-100 text-blue-800'
                }

            ],

            riskSuggestions: [
                {
                    title: '高炉冷却系统升级',
                    area: '炼铁厂 - 3号高炉',
                    priority: '紧急',
                    status: '待执行',
                    statusClass: 'bg-red-100 text-red-800',
                    icon: 'fas fa-tools',
                    iconBg: 'bg-blue-600',
                    borderColor: 'border-blue-600',
                    description: '高炉冷却系统效率持续下降，存在安全隐患，建议进行系统升级和维护。',
                    measures: [
                        '更换老化的冷却水管道和阀门',
                        '升级冷却水监测系统，增加实时监控点',
                        '优化冷却水循环系统，提高冷却效率',
                        '制定详细的维护计划和应急预案'
                    ],
                    updatedAt: '2025-07-08 10:15'
                },
                {
                    title: '转炉温度控制系统优化',
                    area: '炼钢厂 - 2号转炉',
                    priority: '高',
                    status: '进行中',
                    statusClass: 'bg-blue-100 text-blue-800',
                    icon: 'fas fa-thermometer-half',
                    iconBg: 'bg-orange-600',
                    borderColor: 'border-orange-600',
                    description: '转炉温度波动频繁，影响钢水质量和安全生产，需优化温度控制系统。',
                    measures: [
                        '校准现有温度传感器，确保测量准确性',
                        '更新温度控制算法，减少温度波动',
                        '增加备用温度监测设备，提高系统冗余性',
                        '培训操作人员正确应对温度异常情况'
                    ],
                    updatedAt: '2025-07-08 09:30'
                },
                {
                    title: '废气处理系统效率提升',
                    area: '烧结厂 - 1号烧结机',
                    priority: '中',
                    status: '已完成',
                    statusClass: 'bg-green-100 text-green-800',
                    icon: 'fas fa-cloud',
                    iconBg: 'bg-green-600',
                    borderColor: 'border-green-600',
                    description: '废气处理系统效率降低，导致排放指标接近限值，需提升处理效率。',
                    measures: [
                        '清洗和更换过滤装置，恢复过滤效率',
                        '优化废气处理工艺参数，提高处理效率',
                        '增加在线监测点，实时监控排放指标',
                        '制定定期维护计划，确保系统稳定运行'
                    ],
                    updatedAt: '2025-07-07 16:45'
                },
                {
                    title: '轧机传动系统维护',
                    area: '轧钢厂 - 热轧生产线',
                    priority: '中',
                    status: '待执行',
                    statusClass: 'bg-yellow-100 text-yellow-800',
                    icon: 'fas fa-cog',
                    iconBg: 'bg-purple-600',
                    borderColor: 'border-purple-600',
                    description: '轧机传动系统出现异常振动，可能导致设备损坏和生产中断。',
                    measures: [
                        '检查并更换磨损的轴承和传动部件',
                        '进行传动系统动平衡测试和调整',
                        '加强润滑系统维护，确保润滑充分',
                        '制定预防性维护计划，定期检查传动系统'
                    ],
                    updatedAt: '2025-07-07 15:20'
                }
            ]
        };
    },
    computed: {
        totalPages() {
            return Math.ceil(this.filteredHighRiskWarnings.length / this.pageSize);
        },

        paginatedHighRiskWarnings() {
            // 确保 currentPage 不超过 totalPages
            const currentPage = Math.min(this.currentPage, this.totalPages || 1);

            const startIndex = (currentPage - 1) * this.pageSize;
            const endIndex = Math.min(startIndex + this.pageSize, this.filteredHighRiskWarnings.length);

            return this.filteredHighRiskWarnings.slice(startIndex, endIndex);
        },


        pageNumbers() {
            if (this.filteredHighRiskWarnings.length === 0) {
                return [];
            }
            const pages = [];
            const maxVisiblePages = 5;

            if (this.totalPages <= maxVisiblePages) {
                // 如果总页数小于等于最大可见页数，显示所有页码
                for (let i = 1; i <= this.totalPages; i++) {
                    pages.push(i);
                }
            } else {
                // 始终显示第一页
                pages.push(1);

                // 计算中间页码范围
                let startPage = Math.max(2, this.currentPage - 1);
                let endPage = Math.min(this.totalPages - 1, this.currentPage + 1);

                // 调整范围以确保显示足够的页码
                if (this.currentPage <= 3) {
                    endPage = Math.min(this.totalPages - 1, 4);
                } else if (this.currentPage >= this.totalPages - 2) {
                    startPage = Math.max(2, this.totalPages - 3);
                }

                // 添加省略号
                if (startPage > 2) {
                    pages.push('...');
                }

                // 添加中间页码
                for (let i = startPage; i <= endPage; i++) {
                    pages.push(i);
                }

                // 添加省略号
                if (endPage < this.totalPages - 1) {
                    pages.push('...');
                }

                // 始终显示最后一页
                pages.push(this.totalPages);
            }

            return pages;
        },
        paginatedHighRiskWarnings() {
            const startIndex = (this.currentPage - 1) * this.pageSize;
            const endIndex = startIndex + this.pageSize;
            return this.filteredHighRiskWarnings.slice(startIndex, endIndex);
        },
        filteredHighRiskWarnings() {
            // 如果没有搜索关键词，返回所有原始数据
            if (!this.searchKeyword || this.searchKeyword.trim() === '') {
                return this.highRiskWarnings;
            }

            // 有搜索关键词时，进行过滤
            const keyword = this.searchKeyword.toLowerCase().trim();
            return this.highRiskWarnings.filter(item => {
                return item.area.toLowerCase().includes(keyword) ||
                    item.location.toLowerCase().includes(keyword) ||
                    item.riskFactor.toLowerCase().includes(keyword) ||
                    (item.riskDetail && item.riskDetail.toLowerCase().includes(keyword));
            });
        }
    },
    mounted() {
        this.initRiskTrendChart();
        this.initRiskFactorsChart();
        this.initRiskLevelDistributionChart();
        this.initRiskTrendAnalysisChart();
        // 响应窗口大小变化
        window.addEventListener('resize', this.handleResize);
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.handleResize);
    },
    methods: {
        // 日期范围下拉菜单切换
        toggleDateDropdown() {
            this.showDateDropdown = !this.showDateDropdown;
        },

        // 选择日期范围并同步相关图表
        selectDateRange(range) {
            this.selectedDateRange = range;
            this.showDateDropdown = false;

            // 同步评分趋势周期（近7/30/90天）
            const trendPeriodMap = {
                '最近 7 天': '7days',
                '最近 30 天': '30days',
                '最近 90 天': '90days'
            };
            if (trendPeriodMap[range]) {
                this.selectedTrendPeriod = trendPeriodMap[range];
                this.updateRiskTrendChart();
            }

            // 同步风险趋势分析时间范围（近7/30/90天）
            const trendTimeRangeMap = {
                '最近 7 天': '近7天',
                '最近 30 天': '近30天',
                '最近 90 天': '近90天'
            };
            if (trendTimeRangeMap[range]) {
                this.selectedTrendTimeRange = trendTimeRangeMap[range];
                this.updateRiskTrendAnalysisChart();
            }
        },
        exportReport() {

            const reportData = `
                    钢铁企业安全生产智能监管平台风险评估报告
                    =========================================

                    总体风险评分: 78.5/100 (中等风险)

                    高风险区域预警列表:
                    ${this.highRiskWarnings.map(w => `
                    - 区域: ${w.area}
                    - 风险等级: ${w.level}
                    - 主要风险因素: ${w.factor}
                    - 预警时间: ${w.date}
                    - 处理状态: ${w.status}`).join('')}

                    生成时间: ${new Date().toLocaleString()}
                                `.trim();

            const blob = new Blob([reportData], { type: 'text/plain;charset=utf-8' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `风险评估报告_${new Date().toISOString().slice(0, 10)}.txt`;
            document.body.appendChild(a);
            a.click();

            // 清理
            setTimeout(() => {
                document.body.removeChild(a);
                URL.revokeObjectURL(url);
            }, 100);

            // 或者显示一个提示信息
            ElMessage.success('报告已导出！');
        },
        goToPage(page) {
            // 确保页码在有效范围内
            const targetPage = Math.max(1, Math.min(page, this.totalPages || 1));

            if (targetPage !== this.currentPage) {
                this.currentPage = targetPage;
                this.loadPageData();
            }
        },

        // 修改搜索和重置方法
        searchHighRiskWarnings() {
            this.currentPage = 1;
            // 重新计算总页数
            this.$nextTick(() => {
                this.loadPageData();
            });
        },

        resetSearch() {
            this.searchKeyword = '';
            this.currentPage = 1;
            // 重新计算总页数
            this.$nextTick(() => {
                this.loadPageData();
            });
        },
        searchHighRiskWarnings() {
            // 搜索方法 - 实际上不需要特别处理，因为计算属性会自动响应searchKeyword的变化
        },

        resetSearch() {
            this.searchKeyword = '';
        },

        handleFileUpload(event) {
            const files = Array.from(event.target.files);
            this.handlingForm.files = [...this.handlingForm.files, ...files];
        },
        removeFile(index) {
            this.handlingForm.files.splice(index, 1);
        },
        submitHandling() {
            // 更新预警状态
            if (this.warningToProcess) {
                this.warningToProcess.status = '已处理';
                this.warningToProcess.statusClass = 'bg-green-100 text-green-800';
                if(typeof ElMessage !== 'undefined'){
                    ElMessage.success('处理成功！');
                }
            }

            // 显示成功提示
            this.showSuccessMessage = true;
            this.showHandlingModal = false;

            // 3秒后关闭成功提示
            setTimeout(() => {
                this.showSuccessMessage = false;
            }, 3000);

            // 重置表单
            this.handlingForm = {
                measure: '',
                description: '',
                handler: '',
                expectedTime: '',
                files: []
            };
            this.warningToProcess = null;
        },
        showWarningDetail(warning) {
            this.selectedWarning = {
                ...warning,
                riskScore: 85.2,
                suggestions: [
                    '立即检查并维护高炉冷却系统，重点关注老化部件',
                    '增加冷却水温度和压力监测频率，设置自动报警阈值',
                    '制定详细的应急预案，并组织相关人员进行培训演练',
                    '评估设备更新改造的可行性，制定长期改进计划'
                ]
            };
            this.showDetailModal = true;
            this.$nextTick(() => {
                this.initRiskDetailChart();
                this.initMonitoringDataChart();
            });
        },
        handleWarning() {
            if(!this.warningToProcess&&this.selectedWarning){
                const sw = this.selectedWarning;
                this.warningToProcess = this.highRiskWarnings.find(item => 
                item.area === sw.area && 
                item.location === sw.location && 
                item.date === sitem.date &&
                item.time === sitem.time &&
                item.riskFactor === sw.riskFactor)||null
            }
            this.shoitemDetailModal = false;
            this.showHandlingModal = true;
        },
        processWarning(warning){
            if(!warning) return;
            if(warning.status==='已处理'){
                const idx=this.highRiskWarnings.findIndex(item=>item===warning);
                if(idx!==-1){
                    this.highRiskWarnings.splice(idx,1);
                    if(typeof ElMessage !== 'undefined'){
                        ElMessage.success('处理成功！');
                    }
                }
            }else{
                this.warningToProcess=warning;
                this.handleWarning();
            }
        }, 

        showSuggestionDetail(suggestion) {
            this.selectedSuggestion = suggestion;
            this.showSuggestionDetailModal = true;
        },
        handleSuggestion(suggestion) {
            this.selectedSuggestion = suggestion;
            this.showSuggestionDetailModal = false;
            this.showSuggestionHandlingModal = true;
        },
        executeSuggestion(index) {
            // 移除对应的卡片
            this.riskSuggestions.splice(index, 1);

            // 显示成功提示
            this.successMessage = "建议已成功执行并移除";
            this.showSuccessMessage = true;

            // 3秒后关闭成功提示
            setTimeout(() => {
                this.showSuccessMessage = false;
            }, 3000);
        },

        refreshSuggestions() {
            // 随机打乱风险处理建议卡片的顺序
            this.riskSuggestions = [...this.riskSuggestions].sort(() => Math.random() - 0.5);

            // 显示成功提示
            this.successMessage = "建议已更新";
        },

        submitSuggestionHandling() {
            // 更新建议状态
            if (this.selectedSuggestion) {
                this.selectedSuggestion.status = this.suggestionHandlingForm.status;

                // 根据状态设置样式类
                switch (this.suggestionHandlingForm.status) {
                    case '进行中':
                        this.selectedSuggestion.statusClass = 'bg-blue-100 text-blue-800';
                        break;
                    case '已完成':
                        this.selectedSuggestion.statusClass = 'bg-green-100 text-green-800';
                        break;
                    case '已拒绝':
                        this.selectedSuggestion.statusClass = 'bg-red-100 text-red-800';
                        break;
                }
            }

            // 显示成功提示
            this.showSuccessMessage = true;
            this.showSuggestionHandlingModal = false;

            // 3秒后关闭成功提示
            setTimeout(() => {
                this.showSuccessMessage = false;
            }, 3000);

            // 重置表单
            this.suggestionHandlingForm = {
                status: '',
                description: '',
                handler: '',
                expectedTime: '',
            };
        },
        initRiskDetailChart() {
            if (!this.$refs.riskDetailChart) return;
            const chart = echarts.init(this.$refs.riskDetailChart);
            const option = {
                animation: false,
                tooltip: {
                    trigger: 'axis'
                },
                radar: {
                    indicator: [
                        { name: '设备状态', max: 100 },
                        { name: '运行参数', max: 100 },
                        { name: '维护记录', max: 100 },
                        { name: '操作规范', max: 100 },
                        { name: '环境因素', max: 100 }
                    ]
                },
                series: [{
                    type: 'radar',
                    data: [{
                        value: [65, 75, 70, 85, 80],
                        name: '风险指标',
                        areaStyle: {
                            color: 'rgba(49, 130, 206, 0.2)'
                        },
                        lineStyle: {
                            color: '#3182ce'
                        }
                    }]
                }]
            };
            chart.setOption(option);

            // 初始化后立即更新图表数据
            this.$nextTick(() => {
                this.updateRiskTrendChart();
            });
        },
        initMonitoringDataChart() {
            if (!this.$refs.monitoringDataChart) return;
            const chart = echarts.init(this.$refs.monitoringDataChart);
            const option = {
                animation: false,
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['温度', '压力', '流量'],
                    top: 0
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00']
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '温度(°C)',
                        position: 'left'
                    },
                    {
                        type: 'value',
                        name: '压力(MPa)',
                        position: 'right'
                    }
                ],
                series: [
                    {
                        name: '温度',
                        type: 'line',
                        data: [120, 132, 145, 160, 158, 155, 150],
                        lineStyle: { color: '#f56565' }
                    },
                    {
                        name: '压力',
                        type: 'line',
                        yAxisIndex: 1,
                        data: [2.5, 2.8, 3.2, 3.5, 3.4, 3.3, 3.1],
                        lineStyle: { color: '#4299e1' }
                    },
                    {
                        name: '流量',
                        type: 'line',
                        data: [80, 85, 90, 95, 93, 91, 88],
                        lineStyle: { color: '#48bb78' }
                    }
                ]
            };
            chart.setOption(option);

            // 初始化后立即更新图表数据
            this.$nextTick(() => {
                this.updateRiskFactorsChart();
            });
        },
        toggleMenu(index) {
            this.mainMenus[index].expanded = !this.mainMenus[index].expanded;
            // 如果展开了菜单，则将其他菜单收起
            if (this.mainMenus[index].expanded) {
                this.mainMenus.forEach((menu, i) => {
                    if (i !== index) {
                        menu.expanded = false;
                    }
                });
            }
        },
        selectSubmenu(menuIndex, submenuIndex) {
            // 重置所有菜单的激活状态
            this.mainMenus.forEach(menu => {
                menu.active = false;
                menu.subMenus.forEach(submenu => {
                    submenu.active = false;
                });
            });
            // 设置当前选中的菜单和子菜单为激活状态
            this.mainMenus[menuIndex].active = true;
            this.mainMenus[menuIndex].subMenus[submenuIndex].active = true;
            const link = this.mainMenus[menuIndex].subMenus[submenuIndex].link;
            if (link) {
                const dest = link.startsWith('/') ? link : `/${link}`;
                this.$router.push(dest);
            }
        },
        getRiskScoreColor(score) {
            if (score >= 80) return 'text-red-600';
            if (score >= 70) return 'text-orange-600';
            if (score >= 60) return 'text-yellow-600';
            return 'text-green-600';
        },
        getRiskScoreBarColor(score) {
            if (score >= 80) return 'bg-red-500';
            if (score >= 70) return 'bg-orange-500';
            if (score >= 60) return 'bg-yellow-500';
            return 'bg-green-500';
        },
        handleResize() {
            const charts = [
                this.$refs.riskTrendChart,
                this.$refs.riskFactorsChart,
                this.$refs.riskLevelDistributionChart,
                this.$refs.riskTrendAnalysisChart
            ];
            charts.forEach(ref => {
                if (ref) {
                    const chart = echarts.getInstanceByDom(ref);
                    if (chart) {
                        chart.resize();
                    }
                }
            });
        },
        changeTrendPeriod(period) {
            this.selectedTrendPeriod = period;
            this.updateRiskTrendChart();
        },

        toggleDistributionAreaDropdown() {
            this.showDistributionAreaDropdown = !this.showDistributionAreaDropdown;
        },

        selectAreaForDistribution(area) {
            this.selectedAreaForDistribution = area;
            this.showDistributionAreaDropdown = false;
            this.updateRiskLevelDistributionChart();
        },

        // 风险趋势分析区域选择
        selectAreaForTrend(area) {
            this.selectedAreaForTrend = area;
            this.showTrendAreaDropdown = false;
            this.updateRiskTrendAnalysisChart();
        },

        // 切换风险趋势分析区域下拉菜单
        toggleTrendAreaDropdown() {
            this.showTrendAreaDropdown = !this.showTrendAreaDropdown;
            this.showTrendTimeDropdown = false;
        },

        // 风险趋势分析时间范围选择
        selectTrendTimeRange(range) {
            this.selectedTrendTimeRange = range.label;
            this.showTrendTimeDropdown = false;
            this.updateRiskTrendAnalysisChart();
        },

        // 切换风险趋势分析时间范围下拉菜单
        toggleTrendTimeDropdown() {
            this.showTrendTimeDropdown = !this.showTrendTimeDropdown;
            this.showTrendAreaDropdown = false;
        },

        // 更新风险趋势分析图表
        updateRiskTrendAnalysisChart() {
            const chart = this.riskTrendAnalysisChart;
            if (!chart) return;

            // 根据选择的区域和时间范围生成不同的数据
            let highRiskData = [];
            let mediumRiskData = [];
            let lowRiskData = [];
            let riskIndexData = [];
            let xAxisData = [];

            // 根据时间范围设置X轴数据
            switch (this.selectedTrendTimeRange) {
                case '近7天':
                    xAxisData = ['7/1', '7/2', '7/3', '7/4', '7/5', '7/6', '7/7'];
                    break;
                case '近30天':
                    xAxisData = ['6/9', '6/12', '6/15', '6/18', '6/21', '6/24', '6/27', '6/30', '7/3', '7/6'];
                    break;
                case '近90天':
                    xAxisData = ['4/9', '4/24', '5/9', '5/24', '6/9', '6/24', '7/7'];
                    break;
                case '近半年':
                    xAxisData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月'];
                    break;
                case '近一年':
                    xAxisData = ['去年8月', '去年10月', '去年12月', '今年2月', '今年4月', '今年6月'];
                    break;
                default:
                    xAxisData = ['6/9', '6/12', '6/15', '6/18', '6/21', '6/24', '6/27', '6/30', '7/3', '7/6'];
            }

            // 根据区域和时间范围设置数据
            if (this.selectedAreaForTrend === '炼铁厂') {
                if (this.selectedTrendTimeRange === '近7天') {
                    highRiskData = [3, 2, 4, 3, 2, 1, 2];
                    mediumRiskData = [5, 6, 4, 7, 5, 6, 4];
                    lowRiskData = [8, 7, 9, 6, 8, 7, 9];
                    riskIndexData = [75, 72, 78, 74, 71, 68, 70];
                } else {
                    highRiskData = [3, 4, 2, 5, 3, 4, 2, 3, 2, 3];
                    mediumRiskData = [6, 5, 7, 4, 6, 5, 7, 5, 6, 5];
                    lowRiskData = [8, 9, 7, 10, 8, 9, 7, 8, 7, 8];
                    riskIndexData = [75, 78, 72, 80, 75, 78, 72, 75, 72, 75];
                }
            } else if (this.selectedAreaForTrend === '炼钢厂') {
                if (this.selectedTrendTimeRange === '近7天') {
                    highRiskData = [4, 3, 5, 4, 3, 2, 3];
                    mediumRiskData = [6, 7, 5, 8, 6, 7, 5];
                    lowRiskData = [7, 6, 8, 5, 7, 6, 8];
                    riskIndexData = [78, 75, 81, 77, 74, 71, 73];
                } else {
                    highRiskData = [4, 5, 3, 6, 4, 5, 3, 4, 3, 4];
                    mediumRiskData = [7, 6, 8, 5, 7, 6, 8, 6, 7, 6];
                    lowRiskData = [7, 8, 6, 9, 7, 8, 6, 7, 6, 7];
                    riskIndexData = [78, 81, 75, 83, 78, 81, 75, 78, 75, 78];
                }
            } else if (this.selectedAreaForTrend === '轧钢厂') {
                if (this.selectedTrendTimeRange === '近7天') {
                    highRiskData = [2, 3, 2, 4, 3, 2, 3];
                    mediumRiskData = [4, 5, 6, 5, 6, 4, 5];
                    lowRiskData = [6, 7, 8, 7, 9, 6, 7];
                    riskIndexData = [72, 73, 74, 75, 74, 72, 73];
                } else {
                    highRiskData = [2, 3, 2, 4, 3, 3, 2, 3, 2, 3];
                    mediumRiskData = [5, 6, 5, 7, 6, 5, 6, 5, 6, 5];
                    lowRiskData = [7, 8, 7, 9, 8, 7, 8, 7, 8, 7];
                    riskIndexData = [72, 74, 73, 76, 74, 73, 72, 73, 72, 73];
                }
            } else if (this.selectedAreaForTrend === '动力厂') {
                if (this.selectedTrendTimeRange === '近7天') {
                    highRiskData = [1, 2, 2, 3, 2, 1, 2];
                    mediumRiskData = [3, 4, 3, 5, 4, 3, 4];
                    lowRiskData = [5, 6, 5, 7, 6, 5, 6];
                    riskIndexData = [69, 70, 71, 72, 71, 69, 70];
                } else {
                    highRiskData = [1, 2, 2, 3, 2, 2, 1, 2, 2, 2];
                    mediumRiskData = [4, 3, 5, 4, 4, 3, 4, 4, 3, 4];
                    lowRiskData = [6, 5, 7, 6, 6, 5, 6, 6, 5, 6];
                    riskIndexData = [68, 70, 69, 72, 71, 70, 69, 70, 69, 70];
                }
            } else if (this.selectedAreaForTrend === '烧结厂') {
                if (this.selectedTrendTimeRange === '近7天') {
                    highRiskData = [3, 4, 3, 5, 4, 3, 4];
                    mediumRiskData = [6, 6, 7, 8, 7, 6, 7];
                    lowRiskData = [8, 9, 8, 10, 9, 8, 9];
                    riskIndexData = [71, 72, 73, 76, 74, 72, 73];
                } else {
                    highRiskData = [3, 4, 3, 5, 4, 4, 3, 4, 3, 4];
                    mediumRiskData = [6, 7, 6, 8, 7, 6, 7, 6, 7, 6];
                    lowRiskData = [8, 9, 8, 10, 9, 8, 9, 8, 9, 8];
                    riskIndexData = [71, 73, 72, 76, 74, 73, 72, 73, 72, 73];
                }
            } else {
                // 全部区域或其他区域的默认数据
                if (this.selectedTrendTimeRange === '近7天') {
                    highRiskData = [12, 10, 14, 11, 9, 7, 8];
                    mediumRiskData = [25, 27, 23, 28, 24, 26, 22];
                    lowRiskData = [35, 33, 37, 32, 36, 34, 38];
                    riskIndexData = [72, 70, 74, 71, 68, 66, 67];
                } else {
                    highRiskData = [12, 14, 10, 16, 12, 14, 10, 12, 10, 12];
                    mediumRiskData = [25, 23, 27, 21, 25, 23, 27, 24, 26, 24];
                    lowRiskData = [35, 37, 33, 39, 35, 37, 33, 35, 33, 35];
                    riskIndexData = [72, 74, 70, 76, 72, 74, 70, 72, 70, 72];
                }
            }

            // 更新图表数据
            // 动态调整事件数轴最大值，避免柱状被剪裁导致“重叠”视觉问题
            const eventMax = Math.max(
                ...highRiskData,
                ...mediumRiskData,
                ...lowRiskData
            );
            const yMax = Math.ceil(eventMax / 10) * 10; // 向上取整到10的倍数
            const option = {
                xAxis: [{
                    data: xAxisData
                }],
                yAxis: [{
                    max: yMax
                }],
                series: [
                    {
                        name: '高风险事件',
                        data: highRiskData
                    },
                    {
                        name: '中风险事件',
                        data: mediumRiskData
                    },
                    {
                        name: '低风险事件',
                        data: lowRiskData
                    },
                    {
                        name: '风险指数',
                        data: riskIndexData
                    }
                ]
            };
            chart.setOption(option);
        },

        updateRiskTrendChart() {
            // 根据选择的时间段更新图表数据
            let xAxisData = [];
            let totalRiskData = [];
            let safetyManagementData = [];
            let equipmentStatusData = [];
            let environmentFactorData = [];

            // 根据不同时间段生成不同的数据
            switch (this.selectedTrendPeriod) {
                case '7days':
                    xAxisData = ['7/22', '7/23', '7/24', '7/25', '7/26', '7/27', '7/28'];
                    totalRiskData = [75.2, 74.8, 76.1, 73.5, 72.8, 71.9, 70.5];
                    safetyManagementData = [78.5, 77.9, 79.2, 76.8, 75.5, 74.2, 73.1];
                    equipmentStatusData = [72.1, 71.5, 73.8, 70.2, 69.5, 68.8, 67.2];
                    environmentFactorData = [80.5, 79.8, 81.2, 78.5, 77.9, 77.2, 76.5];
                    break;
                case '30days':
                    xAxisData = ['6/29', '7/4', '7/9', '7/14', '7/19', '7/24', '7/28'];
                    totalRiskData = [78.5, 77.2, 76.8, 75.5, 74.2, 72.8, 70.5];
                    safetyManagementData = [81.2, 80.5, 79.8, 78.5, 77.2, 75.5, 73.1];
                    equipmentStatusData = [75.8, 74.5, 73.8, 72.5, 71.2, 69.5, 67.2];
                    environmentFactorData = [83.5, 82.2, 81.5, 80.2, 79.5, 78.2, 76.5];
                    break;
                case '90days':
                    xAxisData = ['4/30', '5/15', '5/30', '6/15', '6/30', '7/15', '7/28'];
                    totalRiskData = [82.5, 81.2, 79.8, 78.5, 76.2, 73.5, 70.5];
                    safetyManagementData = [85.2, 84.5, 82.8, 81.5, 79.2, 76.5, 73.1];
                    equipmentStatusData = [79.8, 78.5, 76.2, 75.5, 73.2, 70.5, 67.2];
                    environmentFactorData = [87.5, 86.2, 84.5, 83.2, 81.5, 79.2, 76.5];
                    break;
                default:
                    xAxisData = ['6/9', '6/16', '6/23', '6/30', '7/7', '7/14', '7/21', '7/28'];
                    totalRiskData = [78.5, 77.2, 76.5, 75.8, 74.2, 72.5, 71.2, 70.5];
                    safetyManagementData = [81.2, 80.5, 79.8, 78.5, 77.2, 75.5, 74.2, 73.1];
                    equipmentStatusData = [75.8, 74.5, 73.8, 72.5, 71.2, 69.5, 68.2, 67.2];
                    environmentFactorData = [83.5, 82.2, 81.5, 80.2, 79.5, 78.2, 77.5, 76.5];
            }

            // 更新图表
            const chart = echarts.init(this.$refs.riskTrendChart);
            chart.setOption({
                xAxis: {
                    data: xAxisData
                },
                series: [
                    {
                        name: '总体风险',
                        data: totalRiskData
                    },
                    {
                        name: '安全管理',
                        data: safetyManagementData
                    },
                    {
                        name: '设备状态',
                        data: equipmentStatusData
                    },
                    {
                        name: '环境因素',
                        data: environmentFactorData
                    }
                ]
            });
        },

        initRiskTrendChart() {
            const chart = echarts.init(this.$refs.riskTrendChart);
            this.riskTrendChart = chart;
            const option = {
                animation: false,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['总体风险', '安全管理', '设备状态', '环境因素'],
                    top: 0,
                    right: 0
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['6/9', '6/16', '6/23', '6/30', '7/7', '7/14', '7/21', '7/28'],
                    axisLine: {
                        lineStyle: {
                            color: '#e2e8f0'
                        }
                    },
                    axisLabel: {
                        color: '#718096'
                    }
                },
                yAxis: {
                    type: 'value',
                    min: 50,
                    max: 100,
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: '#718096'
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#e2e8f0'
                        }
                    }
                },
                series: [
                    {
                        name: '总体风险',
                        type: 'line',
                        smooth: true,
                        lineStyle: {
                            width: 3,
                            color: '#3182ce'
                        },
                        itemStyle: {
                            color: '#3182ce'
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(49, 130, 206, 0.3)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(49, 130, 206, 0.05)'
                                    }
                                ]
                            }
                        },
                        data: [78, 80, 75, 82, 78.5, 77, 79, 81]
                    },
                    {
                        name: '安全管理',
                        type: 'line',
                        smooth: true,
                        lineStyle: {
                            width: 2,
                            color: '#4299e1'
                        },
                        itemStyle: {
                            color: '#4299e1'
                        },
                        data: [82, 83, 80, 85, 82.3, 81, 83, 85]
                    },
                    {
                        name: '设备状态',
                        type: 'line',
                        smooth: true,
                        lineStyle: {
                            width: 2,
                            color: '#ed8936'
                        },
                        itemStyle: {
                            color: '#ed8936'
                        },
                        data: [75, 78, 72, 80, 75.8, 74, 76, 78]
                    },
                    {
                        name: '环境因素',
                        type: 'line',
                        smooth: true,
                        lineStyle: {
                            width: 2,
                            color: '#48bb78'
                        },
                        itemStyle: {
                            color: '#48bb78'
                        },
                        data: [79, 80, 76, 81, 80.2, 78, 80, 82]
                    }
                ]
            };
            chart.setOption(option);

            // 初始化后立即更新图表数据
            this.$nextTick(() => {
                this.updateRiskTrendChart();
            });
        },
        changeChartType(type) {
            this.selectedChartType = type;
            this.updateRiskFactorsChart();
        },

        updateRiskFactorsChart() {
            const chart = echarts.init(this.$refs.riskFactorsChart);

            // 清空图表
            chart.clear();

            let option;

            // 风险因素数据
            const riskFactors = [
                { name: '设备状态', value: 78 },
                { name: '人员操作', value: 65 },
                { name: '环境因素', value: 83 },
                { name: '管理体系', value: 72 },
                { name: '应急能力', value: 68 },
                { name: '安全文化', value: 76 }
            ];

            // 根据选择的图表类型生成不同的配置
            switch (this.selectedChartType) {
                case 'radar':
                    option = {
                        animation: false,
                        tooltip: {
                            trigger: 'item'
                        },
                        radar: {
                            indicator: riskFactors.map(item => ({ name: item.name, max: 100 })),
                            radius: '65%',
                            center: ['50%', '50%'],
                            splitArea: {
                                areaStyle: {
                                    color: ['rgba(250,250,250,0.1)', 'rgba(200,200,200,0.1)']
                                }
                            }
                        },
                        series: [
                            {
                                type: 'radar',
                                name: '风险因素分析',
                                data: [
                                    {
                                        value: riskFactors.map(item => item.value),
                                        name: '风险因素',
                                        areaStyle: {
                                            color: 'rgba(73, 123, 240, 0.2)'
                                        },
                                        lineStyle: {
                                            color: 'rgba(73, 123, 240, 1)'
                                        },
                                        itemStyle: {
                                            color: 'rgba(73, 123, 240, 1)'
                                        }
                                    }
                                ]
                            }
                        ]
                    };
                    break;

                case 'bar':
                    option = {
                        animation: false,
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: riskFactors.map(item => item.name),
                            axisLabel: {
                                interval: 0,
                                rotate: 30
                            }
                        },
                        yAxis: {
                            type: 'value',
                            max: 100
                        },
                        series: [
                            {
                                name: '风险值',
                                type: 'bar',
                                data: riskFactors.map(item => ({
                                    value: item.value,
                                    itemStyle: {
                                        color: this.getRiskValueColor(item.value)
                                    }
                                })),
                                label: {
                                    show: true,
                                    position: 'top'
                                }
                            }
                        ]
                    };
                    break;

                case 'pie':
                    option = {
                        animation: false,
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b}: {c} ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 10,
                            data: riskFactors.map(item => item.name)
                        },
                        series: [
                            {
                                name: '风险因素',
                                type: 'pie',
                                radius: ['40%', '70%'],
                                center: ['60%', '50%'],
                                avoidLabelOverlap: false,
                                label: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        fontSize: '18',
                                        fontWeight: 'bold'
                                    }
                                },
                                labelLine: {
                                    show: false
                                },
                                data: riskFactors.map(item => ({
                                    value: item.value,
                                    name: item.name,
                                    itemStyle: {
                                        color: this.getRiskValueColor(item.value)
                                    }
                                }))
                            }
                        ]
                    };
                    break;
            }

            // 完全替换图表配置，而不是合并
            chart.setOption(option, true);
        },

        // 根据风险值获取对应的颜色
        getRiskValueColor(value) {
            if (value >= 80) return '#e53e3e'; // 高风险 - 红色
            if (value >= 70) return '#dd6b20'; // 中高风险 - 橙色
            if (value >= 60) return '#ecc94b'; // 中风险 - 黄色
            if (value >= 50) return '#38a169'; // 中低风险 - 绿色
            return '#3182ce'; // 低风险 - 蓝色
        },

        initRiskFactorsChart() {
            const chart = echarts.init(this.$refs.riskFactorsChart);
            let option;
            if (this.selectedChartType === 'radar') {
                option = {
                    animation: false,
                    tooltip: {
                        trigger: 'item'
                    },
                    radar: {
                        indicator: [
                            { name: '设备状态', max: 100 },
                            { name: '人员操作', max: 100 },
                            { name: '环境因素', max: 100 },
                            { name: '管理体系', max: 100 },
                            { name: '应急能力', max: 100 },
                            { name: '安全文化', max: 100 }
                        ],
                        radius: '65%',
                        center: ['50%', '50%'],
                        splitArea: {
                            areaStyle: {
                                color: ['rgba(250,250,250,0.1)', 'rgba(200,200,200,0.1)']
                            }
                        }
                    },
                    series: [
                        {
                            type: 'radar',
                            name: '风险因素分析',
                            data: [
                                {
                                    value: [75.8, 82.5, 80.2, 82.3, 78.6, 85.1],
                                    name: '当前评分',
                                    symbol: 'circle',
                                    symbolSize: 8,
                                    lineStyle: {
                                        width: 2,
                                        color: '#3182ce'
                                    },
                                    areaStyle: {
                                        color: 'rgba(49, 130, 206, 0.3)'
                                    }
                                },
                                {
                                    value: [85, 88, 85, 90, 85, 90],
                                    name: '目标评分',
                                    symbol: 'circle',
                                    symbolSize: 8,
                                    lineStyle: {
                                        type: 'dashed',
                                        width: 1,
                                        color: '#718096'
                                    },
                                    areaStyle: {
                                        color: 'rgba(113, 128, 150, 0.1)'
                                    }
                                }
                            ]
                        }
                    ]
                };
            } else if (this.selectedChartType === 'bar') {
                option = {
                    animation: false,
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        data: ['当前评分', '目标评分'],
                        top: 0,
                        right: 0
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: ['设备状态', '人员操作', '环境因素', '管理体系', '应急能力', '安全文化'],
                        axisLine: {
                            lineStyle: {
                                color: '#e2e8f0'
                            }
                        },
                        axisLabel: {
                            color: '#718096',
                            interval: 0,
                            rotate: 30
                        }
                    },
                    yAxis: {
                        type: 'value',
                        min: 50,
                        max: 100,
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            color: '#718096'
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#e2e8f0'
                            }
                        }
                    },
                    series: [
                        {
                            name: '当前评分',
                            type: 'bar',
                            barWidth: '30%',
                            itemStyle: {
                                color: '#3182ce'
                            },
                            data: [75.8, 82.5, 80.2, 82.3, 78.6, 85.1]
                        },
                        {
                            name: '目标评分',
                            type: 'bar',
                            barWidth: '30%',
                            itemStyle: {
                                color: '#cbd5e0'
                            },
                            data: [85, 88, 85, 90, 85, 90]
                        }
                    ]
                };
            } else if (this.selectedChartType === 'pie') {
                option = {
                    animation: false,
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        right: 10,
                        top: 'center',
                        data: ['设备状态', '人员操作', '环境因素', '管理体系', '应急能力', '安全文化']
                    },
                    series: [
                        {
                            name: '风险因素',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '14',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                { value: 24.2, name: '设备状态', itemStyle: { color: '#f56565' } },
                                { value: 17.5, name: '人员操作', itemStyle: { color: '#ed8936' } },
                                { value: 19.8, name: '环境因素', itemStyle: { color: '#ecc94b' } },
                                { value: 17.7, name: '管理体系', itemStyle: { color: '#48bb78' } },
                                { value: 21.4, name: '应急能力', itemStyle: { color: '#4299e1' } },
                                { value: 14.9, name: '安全文化', itemStyle: { color: '#667eea' } }
                            ]
                        }
                    ]
                };
            }
            chart.setOption(option);
        },
        initRiskLevelDistributionChart() {
            const chart = echarts.init(this.$refs.riskLevelDistributionChart);

            // 初始化后立即更新图表数据
            this.$nextTick(() => {
                this.updateRiskLevelDistributionChart();
            });
        },

        updateRiskLevelDistributionChart() {
            const chart = echarts.init(this.$refs.riskLevelDistributionChart);

            // 清空图表
            chart.clear();

            // 根据选择的区域生成不同的数据
            let data = [];

            switch (this.selectedAreaForDistribution) {
                case '炼铁厂':
                    data = [
                        { value: 28, name: '高风险', itemStyle: { color: '#e53e3e' } },
                        { value: 45, name: '中风险', itemStyle: { color: '#ed8936' } },
                        { value: 20, name: '低风险', itemStyle: { color: '#ecc94b' } },
                        { value: 7, name: '无风险', itemStyle: { color: '#48bb78' } }
                    ];
                    break;
                case '炼钢厂':
                    data = [
                        { value: 22, name: '高风险', itemStyle: { color: '#e53e3e' } },
                        { value: 38, name: '中风险', itemStyle: { color: '#ed8936' } },
                        { value: 30, name: '低风险', itemStyle: { color: '#ecc94b' } },
                        { value: 10, name: '无风险', itemStyle: { color: '#48bb78' } }
                    ];
                    break;
                case '烧结厂':
                    data = [
                        { value: 25, name: '高风险', itemStyle: { color: '#e53e3e' } },
                        { value: 42, name: '中风险', itemStyle: { color: '#ed8936' } },
                        { value: 25, name: '低风险', itemStyle: { color: '#ecc94b' } },
                        { value: 8, name: '无风险', itemStyle: { color: '#48bb78' } }
                    ];
                    break;
                case '轧钢厂':
                    data = [
                        { value: 18, name: '高风险', itemStyle: { color: '#e53e3e' } },
                        { value: 35, name: '中风险', itemStyle: { color: '#ed8936' } },
                        { value: 35, name: '低风险', itemStyle: { color: '#ecc94b' } },
                        { value: 12, name: '无风险', itemStyle: { color: '#48bb78' } }
                    ];
                    break;
                case '动力厂':
                    data = [
                        { value: 15, name: '高风险', itemStyle: { color: '#e53e3e' } },
                        { value: 30, name: '中风险', itemStyle: { color: '#ed8936' } },
                        { value: 40, name: '低风险', itemStyle: { color: '#ecc94b' } },
                        { value: 15, name: '无风险', itemStyle: { color: '#48bb78' } }
                    ];
                    break;
                default: // 全部区域
                    data = [
                        { value: 20, name: '高风险', itemStyle: { color: '#e53e3e' } },
                        { value: 40, name: '中风险', itemStyle: { color: '#ed8936' } },
                        { value: 30, name: '低风险', itemStyle: { color: '#ecc94b' } },
                        { value: 10, name: '无风险', itemStyle: { color: '#48bb78' } }
                    ];
            }

            const option = {
                animation: false,
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    right: 10,
                    top: 'center',
                    data: ['高风险', '中风险', '低风险', '无风险']
                },
                series: [
                    {
                        name: '风险等级分布',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        data: data,
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '14',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        }
                    }
                ]
            };
            chart.setOption(option);
        },
        initRiskTrendAnalysisChart() {
            const chart = echarts.init(this.$refs.riskTrendAnalysisChart);
            this.riskTrendAnalysisChart = chart;

            // 初始化后立即更新图表数据
            this.$nextTick(() => {
                this.updateRiskTrendAnalysisChart();
            });

            const option = {
                animation: false,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['高风险事件', '中风险事件', '低风险事件', '风险指数'],
                    top: 0,
                    right: 0
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: true,
                        data: ['6/9', '6/12', '6/15', '6/18', '6/21', '6/24', '6/27', '6/30', '7/3', '7/6'],
                        axisLine: {
                            lineStyle: {
                                color: '#e2e8f0'
                            }
                        },
                        axisLabel: {
                            color: '#718096'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '事件数',
                        min: 0,
                        max: 20,
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            color: '#718096',
                            formatter: '{value}'
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#e2e8f0'
                            }
                        }
                    },
                    {
                        type: 'value',
                        name: '风险指数',
                        min: 60,
                        max: 90,
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            color: '#718096',
                            formatter: '{value}'
                        },
                        splitLine: {
                            show: false
                        }
                    }
                ],
                series: [
                    {
                        name: '高风险事件',
                        type: 'bar',
                        barWidth: '28%',
                        barGap: '15%',
                        barCategoryGap: '25%',
                        itemStyle: {
                            color: '#f56565'
                        },
                        data: [4, 3, 5, 6, 4, 3, 2, 3, 4, 2]
                    },
                    {
                        name: '中风险事件',
                        type: 'bar',
                        barWidth: '28%',
                        barGap: '15%',
                        barCategoryGap: '25%',
                        itemStyle: {
                            color: '#ed8936'
                        },
                        data: [6, 5, 7, 8, 6, 5, 4, 5, 6, 4]
                    },
                    {
                        name: '低风险事件',
                        type: 'bar',
                        barWidth: '28%',
                        barGap: '15%',
                        barCategoryGap: '25%',
                        itemStyle: {
                            color: '#ecc94b'
                        },
                        data: [8, 7, 9, 10, 8, 7, 6, 7, 8, 6]
                    },
                    {
                        name: '风险指数',
                        type: 'line',
                        yAxisIndex: 1,
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 8,
                        lineStyle: {
                            width: 3,
                            color: '#3182ce'
                        },
                        itemStyle: {
                            color: '#3182ce'
                        },
                        data: [75, 78, 80, 82, 79, 76, 74, 77, 80, 72.5]
                    }
                ]
            };
            chart.setOption(option);
        }
    }
};
</script>
<style scoped>
/* 自定义样式 */
.risk-assessment__chart-container {
    position: relative;
    width: 100%;
    height: 100%;
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 隐藏input number的箭头 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* 自定义选择器样式 */
select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8.825L1.175 4 2.05 3.125 6 7.075 9.95 3.125 10.825 4 6 8.825z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 0.75rem;
    padding-right: 2rem;
}

/* 进度条样式 */
.progress-bar__custom {
    transition: width 0.3s ease;
}
</style>